<template>
  <layout :showBg="false">
    <template #header>
      <view class="header flex flex-a">
        <image
          src="../../assets/images/icons/arrow-right.png"
          class="arrow-left back"
          style="width: 48rpx; height: 48rpx; opacity: 0.6"
          mode="scaleToFill"
          @click="back"
        />
        <view class="input flex flex-a">
          <image
            src="../../assets/images/icons/search.png"
            style="width: 40rpx; height: 40rpx"
          ></image>
          <input
            v-model="keyword"
            placeholder="请输入关键字"
            placeholder-class="input-placeholder"
            class="f1"
            confirmType="search"
            style="padding: 0 16rpx"
            @confirm="onSearch(true)"
          />
          <image
            src="../../assets/images/icons/close-circle.png"
            style="width: 40rpx; height: 40rpx"
            mode="scaleToFill"
            v-show="false"
            @click="keyword = ''"
          />
        </view>
        <text @click="onSearch(true)" class="active-text fs-32">搜索</text>
      </view>
      <view class="filter-box flex flex-bt flex-a">
        <view class="flex flex-a" @click="showTypes = true">
          <text class="fs-28 c-80" :class="{ 'active-text': shoosedCategory }">短剧类型</text>
          <image
            v-if="!shoosedCategory"
            src="../../assets/images/icons/arrow-right.png"
            style="width: 36rpx; height: 36rpx; opacity: 0.6"
            class="arrow-down"
            mode="scaleToFill"
          />
          <image
            v-else
            src="../../assets/images/icons/arrow-right-active.png"
            style="width: 36rpx; height: 36rpx; opacity: 0.6"
            class="arrow-down"
            mode="scaleToFill"
          />
        </view>
        <view class="flex flex-a" @click="showTimes = true">
          <text class="fs-28 c-80" :class="{ 'active-text': shoosedTime }">时间</text>
          <image
            v-if="!shoosedTime"
            src="../../assets/images/icons/arrow-right.png"
            style="width: 36rpx; height: 36rpx; opacity: 0.6"
            class="arrow-down"
            mode="scaleToFill"
          />
          <image
            v-else
            src="../../assets/images/icons/arrow-right-active.png"
            style="width: 36rpx; height: 36rpx; opacity: 0.6"
            class="arrow-down"
            mode="scaleToFill"
          />
        </view>
        <view @click="showFilter = true" class="flex flex-a">
          <text class="fs-28 c-80">筛选</text>
          <image
            src="../../assets/images/icons/filter.png"
            style="width: 36rpx; height: 36rpx"
            mode="scaleToFill"
          />
        </view>
      </view>
    </template>
    <view class="content">
      <!-- 内容 -->
      <scroll-view class="scroll-box" scroll-y @scrolltolower="onScroll">
        <view class="list-box flex" v-if="list.length">
          <Card
            v-for="item in list"
            :key="item.vid"
            class="card"
            :info="item"
          ></Card>
        </view>
        <empty
          v-if="!list.length && !loading"
          :pic="require('../../assets/images/empty/normal.png')"
        />
      </scroll-view>
    </view>
    <FilterPopup
      @close="onClose"
      @confirm="onConfirm"
      @reset="onReset"
      :selecetdVal="selecetdVal"
      :origin="origin"
      :filters="collectFilters"
      :show="showFilter"
      :pathName="'dpath'"
    />
    <u-popup
      round="32rpx"
      class="f-content"
      :show="showTypes"
      @close="closeTypes"
    >
      <view class="f-content">
        <view
          v-for="(item, index) in typesFilters"
          :key="item.id"
          @click="chooseType(item)"
          class="f-item flex flex-a-c c-90 fs-32"
          :class="{
            preview: index == typesFilters.length - 1,
            active: item.id == category,
          }"
          >{{ item.name }}</view
        >
        <view
          class="f-item flex flex-a-c c-60 fs-32"
          @click="showTypes = false"
        >
          取消
        </view>
      </view>
    </u-popup>
    <u-popup
      round="32rpx"
      class="f-content"
      :show="showTimes"
      @close="closeTimes"
    >
      <view class="f-content">
        <view
          v-for="(item, index) in timeFilters"
          :key="item.id"
          @click="chooseTime(item)"
          class="f-item flex flex-a-c c-90 fs-32"
          :class="{
            preview: index == timeFilters.length - 1,
            active: item.id == selecetdTime,
          }"
          >{{ item.name }}</view
        >
        <view
          class="f-item flex flex-a-c c-60 fs-32"
          @click="showTimes = false"
        >
          取消
        </view>
      </view>
    </u-popup>
  </layout>
</template>
<script>
import layout from "../../compennts/layout/index.vue";
import pageHead from "../../compennts/pageHead/index.vue";
import Card from "../../compennts/drama/Card.vue";
import FilterPopup from "../../compennts/filter/index.vue";
import empty from "../../compennts/empty/index.vue";

import { collectFilters } from "../../assets/utils/constance";
import { getDramas } from "../../api/drama/index";
import { formatDate, getDayBegin, getDayEnd } from "../../assets/utils/date";
import { copyObj } from "../../assets/utils/index";

export default {
  components: {
    layout,
    pageHead,
    Card,
    FilterPopup,
    empty,
  },
  data() {
    return {
      keyword: "",
      showTypes: false,
      showTimes: false,
      collectFilters: collectFilters.options,
      origin: collectFilters.default("dpath"),
      selecetdVal: collectFilters.default("dpath"),
      showFilter: false,
      page: {
        pageNum: 1,
        pageSize: 20,
      },
      list: [],
      loading: false,
      query: {},
      timeFilters: [
        {
          name: "全部",
          id: null,
        },
        {
          name: "今日",
          id: 0,
        },
        {
          name: "近3日",
          id: 1,
        },
        {
          name: "近7日",
          id: 2,
        },
      ],
      typesFilters: [],
      category: "",
      selecetdTime: null,
    };
  },
  computed:{
    shoosedCategory(){
      return this.category !== '' && this.category != null
    },
    shoosedTime(){
      return this.selecetdTime !== '' && this.selecetdTime != null
    }
  },
  watch: {
    showFilter(val) {
      this.showFilter = val;
    },
    loading(val) {
      if (val) {
        uni.showLoading({
          mask: true,
        });
      } else {
        uni.hideLoading();
      }
    },
  },
  onLoad(options) {
    if (options?.keyword) this.keyword = options.keyword;
    if (options?.category) {
      this.category = options.category;
    }else{
      this.category = null
    }
    if (options?.time) {
      this.selecetdTime = options.time;
    }
  },
  onShow() {
    if (this.selecetdTime != null) {
      for (let i = 0; i < this.origin.length; i++) {
        if (this.origin[i].key == "onlineTime") {
          this.origin[i].value = Number(this.selecetdTime);
          this.selecetdVal[i].value = Number(this.selecetdTime);
          break;
        }
      }
    }
    this.page.pageNum = 1;
    let types = uni.getStorageSync("categories");
    if (types) {
      this.typesFilters = JSON.parse(types);
      this.typesFilters.unshift({
        id: null,
        name: "全部",
      });
    }
    this.onGetDramas();
  },

  methods: {
    back() {
      uni.navigateBack();
    },
    onConfirm(val) {
      this.origin = copyObj(val);
      this.selecetdVal = copyObj(val);
      for(let i=0;i<this.selecetdVal.length;i++){
        if(this.selecetdVal[i].key=='onlineTime'){
         this.selecetdTime = this.selecetdVal[i].value 
         break
        }
      }
      this.showFilter = false;
      this.pageNum = 1;
      this.onGetDramas();
    },
    chooseType(item) {
      if(this.category == item.id) return
      this.category = item.id;
      this.showTypes = false;
      this.page.pageNum = 1;
      this.onGetDramas();
    },
    chooseTime(item) {
      if(this.selecetdTime == item.id) return
      this.selecetdTime = item.id;
      for (let i = 0; i < this.origin.length; i++) {
        if (this.origin[i].key == "onlineTime") {
          this.origin[i].value = this.selecetdTime;
          this.selecetdVal[i].value = this.selecetdTime;
          break;
        }
      }
      this.showTimes = false;
      this.page.pageNum = 1;
      this.onGetDramas();
    },
    closeTypes() {
      this.showTypes = false;
    },
    closeTimes() {
      this.showTimes = false;
    },
    onReset() {
      this.selecetdVal = collectFilters.default("dpath");
    },
    onClose(val) {
      this.showFilter = false;
      this.selecetdVal = copyObj(this.origin);
    },
    onScroll() {
      this.page.pageNum++;
      this.onGetDramas(true);
    },
    onSearch() {
      this.page.pageNum = 1;
      this.onGetDramas();
    },
    onGetDramas(isLoadMore) {
      this.loading = true;
      let p = {};
      let path = "";
      for (let i in this.selecetdVal) {
        p[this.selecetdVal[i].key] = this.selecetdVal[i].value;
        if (this.selecetdVal[i].path) path = this.selecetdVal[i].path;
      }
      p.onlineTimeStart = null;
      p.onlineTimeEnd = null;
      if (p.onlineTime != null || this.selecetdTime != null) {
        const daymap = [0, 3, 7];
        p.onlineTimeStart = formatDate(getDayBegin(daymap[p.onlineTime]));
        p.onlineTimeEnd = formatDate(getDayEnd());
      }
      if (this.keyword) p.vname = this.keyword;
      if (this.category) p.categoryIds = [Number(this.category)];
      getDramas(path, {
        ...this.page,
        ...p,
      })
        .then((res) => {
          this.list = isLoadMore
            ? [...this.list, ...(res?.rows || [])]
            : res?.rows || [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/styles/common.less");
.header {
  padding: 0 32rpx;
  .input {
    flex: 1;
    background: #f7f8ff;
    height: 80rpx;
    border-radius: 16rpx;
    padding: 0 32rpx;
    margin: 0 32rpx;
    .input-placeholder {
      color: rgba(31, 35, 41, 0.4);
    }
  }
}
.filter-box {
  padding: 32rpx;
}
.content {
  height: 100%;
  padding: 32rpx;
  background: #f7f8ff;
  .scroll-box {
    height: 100%;
    width: 100%;
    .list-box {
      flex-wrap: wrap;
      .card {
        width: calc((100% - 32rpx) / 3);
        margin-bottom: 24rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }
}
.f-content {
  .f-item {
    height: 112rpx;
    text-align: center;
    border-bottom: 1px solid #f1f1f1;
    &:nth-child(1) {
      border-radius: 32px 32px 0px 0px;
    }
    &.active {
      color: #436af3;
    }
  }
  .preview {
    border-bottom: 8rpx solid #f1f1f1;
  }
}
</style>
